<!-- 页面说明 -->
<template>
  <main class="page-main">

    <a-form :model="formData" name="basic" autocomplete="off"
            :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
        @finish="onFinish" @finishFailed="onFinishFailed"
    >
           <a-form-item label='显示界面类型'  name='displayType' >
               <a-input v-model:value='formData.displayType' />
           </a-form-item>
           <a-form-item label='显示界面名称'  name='displayName' >
               <a-input v-model:value='formData.displayName' />
           </a-form-item>
           <a-form-item label='关联图片'  name='img' >
               <a-input v-model:value='formData.img' />
           </a-form-item>
           <a-form-item label='闪烁'  name='flashing' >
               <a-input v-model:value='formData.flashing' />
           </a-form-item>
           <a-form-item label='显示字符'  name='characters' >
               <a-input v-model:value='formData.characters' />
           </a-form-item>
           <a-form-item label='颜色匹配'  name='ColorMatching' >
               <a-input v-model:value='formData.ColorMatching' />
           </a-form-item>
           <a-form-item label='布局位置'  name='LayoutPosition' >
               <a-input v-model:value='formData.LayoutPosition' />
           </a-form-item>
           <a-form-item label='是否为模板 1为模板'  name='tempFlag' >
               <a-input v-model:value='formData.tempFlag' />
           </a-form-item>
      <a-flex class="width"  justify="space-around" >
        <a-button type="primary"  html-type="submit">提交</a-button>
        <a-button  @click="handleClose">取消</a-button>
      </a-flex>
    </a-form>
  </main>
</template>
<script lang="ts">
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/SDisplayInterfaceApi";
import { notification } from 'ant-design-vue';

export default {
  props:{
    dataId:{type:Number}
  },
  components: {

  },
  data() {
    return {
      formData: {

      },
      rules:{
      }
    }
  },
  methods: {
    onFinish (values: any)  {
      console.log('Success:', values,this.$props.dataId);
      this.handleSave();
    },
   onFinishFailed (errorInfo: any)  {
      console.log('Failed:', errorInfo);
    },
    handleClose(){
      this.$emit("close");
    },
    handleSuccessed(){
      this.$emit("successed");
    },
    /**
     * 保存数据
     */
    handleSave() {
      api.save(this.formData).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          this.handleSuccessed();
          this.handleClose();
          //请求失败
          notification.success({
            message: this.actionType + "成功",
            description:  this.actionType + "成功"
          });

        } else {
          this.handleClose();
          //请求失败
          notification.error({
            message: "提交失败",
            description: res.message
          });
        }
      });
    },
    handleGetDetail(){
      if(!this.$props.dataId){
        return
      }
      api.getById(this.$props.dataId).then(res=>{
        if(apiUtil.isSuccessed(res)){
          this.formData = res.data;
        }
      })
    }
  },
  computed: {
      actionType(){
        return this.$props.dataId ? "修改" : "添加"
      }
  },
  watch: {
    dataId(newValue){
      console.log("dataId:",newValue);
      if(newValue){
        this.handleGetDetail();
      }else {
        this.formData={}
      }
    }
  },
  mounted() {
    if(this.$props.dataId){
      this.handleGetDetail();
    }
  }
}
</script>
<style scoped>

</style>